<template>
  <div class="quill-editor">
    <!-- 图片上传组件辅助 -->

    <!-- <el-upload

      class="avatar-uploader quill-img"

      ref="upload"

      action="http://139.215.190.237:8081/api/management/news/uploadfile"

      name="file"

      :headers="headers"

      :show-file-list="false"

      :on-success="quillImgSuccess"

      :on-error="uploadError"

      :before-upload="quillImgBefore"

      :accept="acceptType"

      >上传图片/视频</el-upload

    > -->

    <!-- <slot name="toolbar"></slot>

    <div ref="editor"></div>

    <div id="editor"></div> -->

    <!-- 富文本组件 -->

    <quill-editor class="editor" v-model="content" ref="quillEditor" :options="editorOption" @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>

    <input type="file" name="file" hidden accept="audio/mp4, video/mp4" ref="video" @change="handleChange" />

    <input type="file" name="file" hidden :accept="acceptType" ref="image" @change="handleChange" />
  </div>
</template>

<script>
//  import { getToken } from '@/utils/auth'

// 工具栏配置

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线

  ["blockquote", "code-block"], // 引用  代码块

  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表

  [{ indent: "-1" }, { indent: "+1" }], // 缩进

  [{ size: ["small", false, "large", "huge"] }], // 字体大小

  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题

  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色

  [{ align: [] }], // 对齐方式

  ["clean"], // 清除文本格式

  ["link", "image", "video"], // 链接、图片、视频
];

// import _Quill from 'quill'

// const Quill = window.Quill || _Quill

import { quillEditor } from "vue-quill-editor";

import "quill/dist/quill.core.css";

import "quill/dist/quill.snow.css";

import "quill/dist/quill.bubble.css";

import { ImageDrop } from "quill-image-drop-module";

import ImageResize from "quill-image-resize-module";

Quill.register("modules/imageDrop", ImageDrop);

Quill.register("modules/imageResize", ImageResize);

if (typeof Object.assign != "function") {
  Object.defineProperty(Object, "assign", {
    value(target, varArgs) {
      if (target == null) {
        throw new TypeError("Cannot convert undefined or null to object");
      }

      const to = Object(target);

      for (let index = 1; index < arguments.length; index++) {
        const nextSource = arguments[index];

        if (nextSource != null) {
          for (const nextKey in nextSource) {
            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }

      return to;
    },

    writable: true,

    configurable: true,
  });
}

//视频处理

const BlockEmbed = Quill.import("blots/block/embed");

class VideoBlot extends BlockEmbed {
  static create(value) {
    let node = super.create();

    node.setAttribute("poster", value.poster);

    node.setAttribute("src", value.url);

    node.setAttribute("controls", value.controls);

    node.setAttribute("width", value.width);

    node.setAttribute("height", value.height);

    node.setAttribute("webkit-playsinline", true);

    node.setAttribute("playsinline", true);

    node.setAttribute("x5-playsinline", true);

    return node;
  }

  static value(node) {
    return {
      url: node.getAttribute("src"),

      poster: node.getAttribute("poster"),

      controls: node.getAttribute("controls"),

      width: node.getAttribute("width"),

      height: node.getAttribute("height"),
    };
  }
}

VideoBlot.blotName = "simpleVideo";

VideoBlot.tagName = "video";

Quill.register(VideoBlot);

export default {
  props: {
    coverImg: {
      type: Array,
    },

    /* 编辑器的内容 */

    value: {
      type: String,
    },

    /* 图片大小 */

    maxSize: {
      type: Number,

      default: 4000, //kb
    },
  },

  components: { quillEditor },

  data() {
    return {
      coverImgs: this.coverImg,

      acceptType: "image/*",

      content: this.value,

      editorOption: {
        placeholder: "",

        theme: "snow", // or 'bubble'

        placeholder: "请输入内容",

        modules: {
          toolbar: {
            container: toolbarOptions,

            handlers: {
              image: function (value) {
                if (value) {
                  // 触发input框选择图片文件
                  // document.querySelector(".quill-img input").click();
                } else {
                  this.quill.format("image", false);
                }
              },

              video: function (value) {
                if (value) {
                  // 触发input框选择图片文件
                  // document.querySelector(".quill-img input").click();
                } else {
                  this.quill.format("video", false);
                }
              },
            },
          },

          imageResize: {
            displayStyles: {
              // 放大缩小

              backgroundColor: "black",

              border: "none",

              color: "white",
            },

            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
        },
      },
      uploadImgUrl:
        "http://139.215.190.237:8081/api/management/addNews/uploadfile", // 上传的图片服务器地址
      headers: {
        Authorization: sessionStorage.getItem("token"),
      },
    };
  },

  watch: {
    coverImg: {
      handler(value) {
        this.coverImgs = value;
      },
      deep: true,
    },
    value: function () {
      this.content = this.value;
    },
  },

  mounted() {
    if (this.$refs.quillEditor) {
      this.$refs.quillEditor.quill

        .getModule("toolbar")

        .addHandler("image", this.imgHandler);

      this.$refs.quillEditor.quill

        .getModule("toolbar")

        .addHandler("video", this.videoHandler);
    }
  },

  methods: {
    imgHandler(state) {
      if (state) {
        this.$refs.image.click();
      }
    },

    videoHandler(state) {
      if (state && this.coverImgs.length > 0) {
        this.$refs.video.click();
      } else {
        this.$message.error("请先上传封面图");
      }
    },

    handleChange(e) {
      let t = this;
      const files = Array.prototype.slice.call(e.target.files);
      if (!files) {
        return;
      }
      let formdata = new FormData();
      formdata.append("file_name", files[0].name);
      formdata.append("file", files[0]);
      //使用了axios请求
      this.$http
        .post(
          "http://139.215.190.237:8081/api/management/addNews/uploadfile",
          formdata,
          {
            headers: {
              Authorization: sessionStorage.getItem("token"),
            },
          }
        )
        .then(
          (res) => {
            console.log(res, "tytttt");
            //这里设置为空是为了联系上传同张图可以触发change事件
            t.$refs.image.value = "";
            t.$refs.video.value = "";
            if (res.data.status == 100) {
              let selection = t.$refs.quillEditor.quill.getSelection();

              //这里就是返回的图片地址，如果接口返回的不是可以访问的地址，要自己拼接

              let imgUrl = res.data.data;

              let isMp4 = imgUrl.indexOf("mp4");

              // imgUrl = imgUrl.replace(/\\/g, "/");

              //获取quill的光标，插入图片

              if (isMp4 == -1) {
                t.$refs.quillEditor.quill.insertEmbed(
                  selection != null ? selection.index : 0,

                  "image",

                  imgUrl
                );
              } else {
                t.$refs.quillEditor.quill.insertEmbed(
                  selection != null ? selection.index : 0,
                  "simpleVideo",
                  {
                    url: imgUrl,
                    poster: "",
                    controls: "controls",
                    width: "100%",
                    height: "auto",
                    autoplay: false,
                  }
                );
              }

              //插入完成后，光标往后移动一位

              t.$refs.quillEditor.quill.setSelection(selection.index + 1);
            }
          },

          (error) => {
            t.$refs.image.value = "";

            t.$refs.video.value = "";

            t.$message.error("上传失败");
          }
        );
    },

    onEditorBlur() {
      //失去焦点事件
    },

    onEditorFocus() {
      //获得焦点事件
    },

    onEditorChange() {
      //内容改变事件

      this.$emit("input", this.content);
    },

    // 富文本图片上传前

    quillImgBefore(file) {
      let fileType = file.type;

      // if (fileType === 'image/jpeg' || fileType === 'image/png') {

      //     return true;

      // } else {

      //     this.$message.error('请插入图片类型文件(jpg/jpeg/png)');

      //     return false;

      // }
    },

    quillImgSuccess(res, file) {
      console.log(
        "%c [ res ]-108",

        "font-size:13px; background:pink; color:#bf2c9f;",

        res
      );

      // res为图片服务器返回的数据

      // 获取富文本组件实例

      let quill = this.$refs.quillEditor.quill;

      // 如果上传成功

      if (res.status == 100) {
        // 获取光标所在位置

        let length = quill.getSelection().index;

        // 插入图片  res.url为服务器返回的图片地址

        let isMp4 = res.data.indexOf("mp4");

        // if (isMp4 > -1) {

        //   quill.insertEmbed(length, "video", res.data);

        // } else {

        //   quill.insertEmbed(length, "image", res.data);

        // }

        // // 调整光标到最后

        // quill.setSelection(length + 1);

        let selection = this.$refs.quillEditor.quill.getSelection();

        if (isMp4 > -1) {
          this.$refs.quillEditor.quill.insertEmbed(
            selection != null ? selection.index : 0,

            "video",

            res.data
          );
        } else {
          this.$refs.quillEditor.quill.insertEmbed(
            selection != null ? selection.index : 0,

            "image",

            res.data
          );
        }

        //插入完成后，光标往后移动一位

        this.$refs.quillEditor.quill.setSelection(selection.index + 1);
      } else {
        this.$message.error("上传失败");
      }

      this.$refs.upload.clearFiles();
    },

    // 富文本图片上传失败

    uploadError() {
      // loading动画消失

      this.$message.error("图片插入失败");
    },
  },
};
</script>

<style>
.editor {
  line-height: normal !important;

  width: 80%;
}

.ql-container {
  min-height: 250px;
}

.quill-img {
  display: none;
}

.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;

  content: "保存";

  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>
